<template>
  <div class="warpper">
    <div class="refuel-log">
      <p class="title">
        <span class="license">{{ $store.state.user.license }}</span
        ><b style="font-size: 14px; color: #999">
          ({{ $store.state.user.carType }})</b
        >
       
        <span class="tip"
          >共 <b>{{ count }}</b> 次，总计
          <b>{{ $store.state.user.payTotal.toFixed(2) || 0 }}</b> 元，总里程：<b
            >{{ $store.state.user.mileage }}公里</b
          ></span
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-circle-plus"
          @click="add"
          style="float: right; margin: 8px 20px 0 0"
          >新增
        </el-button>
      </p>
      <template>
        <el-table :data="refuelLog" border style="width: 100%">
          <el-table-column label="日期" width="150">
            <template slot-scope="scope">
              {{ scope.row.refuel_time | timeFormate("YYYY-MM-DD") }}
            </template>
          </el-table-column>
          <el-table-column prop="pay_money" label="金额（元）" width="120">
          </el-table-column>
          <el-table-column label="支付方式" width="120">
            <template slot-scope="scope">
              {{ scope.row.pay_type | payType }}
            </template>
          </el-table-column>
          <el-table-column prop="oil_type" label="油号" width="80">
          </el-table-column>
          <el-table-column prop="liters" label="升" width="80">
          </el-table-column>
          <el-table-column
            prop="station_name"
            align="left"
            label="加油站"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="station_address" label="地址" align="left">
          </el-table-column>
          <el-table-column prop="mileage" label="里程" align="left">
          </el-table-column>
          <el-table-column label="平均油耗" align="left">
            <template slot-scope="scope">
              {{ scope.row.avg_kilo || "--" }}L/百公里
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  @click="edit(scope.row, scope.$index)"
                  icon="el-icon-edit"
                ></el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="del(scope.row)"
                  icon="el-icon-delete"
                ></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-top: 10px"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </template>
    </div>
    <el-dialog title="提示" :visible.sync="delConfirm" width="30%" center>
      <span style="color: red"
        >是否删除{{
          refuelObj.refuel_time | timeFormate("YYYY-MM-DD")
        }}日的加油记录？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="delConfirm = false">取 消</el-button>
        <el-button type="danger" @click="delConfirmSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="addorEdit == 'add' ? '新增记录' : '编辑记录'"
      :visible.sync="addOne"
      top="4vh"
      @close="close"
    >
      <el-form :model="form" ref="addOneForm">
        <el-form-item
          label="加油日期："
          :label-width="formLabelWidth"
          prop="refuel_time"
          required
        >
          <el-date-picker
            v-model="form.refuel_time"
            type="date"
            placeholder="选择日期："
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="付款金额："
          :label-width="formLabelWidth"
          prop="pay_money"
          required
        >
          <el-input-number
            v-model="form.pay_money"
            :precision="2"
            :step="0.1"
            :max="100000"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="付款方式："
          :label-width="formLabelWidth"
          prop="pay_type"
          required
        >
          <el-select v-model="form.pay_type" placeholder="请选付款方式">
            <el-option label="现金" value="cash"></el-option>
            <el-option label="微信" value="wechat"></el-option>
            <el-option label="支付宝" value="alipay"></el-option>
            <el-option label="银行卡" value="card"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="油号："
          :label-width="formLabelWidth"
          prop="oil_type"
          required
        >
          <el-radio v-model="form.oil_type" label="92">92</el-radio>
          <el-radio v-model="form.oil_type" label="95">95</el-radio>
        </el-form-item>
        <el-form-item label="升：" :label-width="formLabelWidth" prop="liters">
          <el-input-number
            v-model="form.liters"
            :precision="2"
            :step="0.1"
            :max="100000"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="加油站："
          :label-width="formLabelWidth"
          prop="refuel_station_id"
          required
        >
          <el-select v-model="form.refuel_station_id" placeholder="请选加油站">
            <el-option
              v-for="item in stations"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="里程："
          :label-width="formLabelWidth"
          prop="mileage"
        >
          <el-input-number
            v-model="form.mileage"
            :precision="1"
            :step="100"
            :max="10000000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="照片：" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="headers"
            with-credentials="true"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOne = false">取 消</el-button>
        <el-button v-if="addorEdit == 'add'" type="primary" @click="addSubmit"
          >新 增</el-button
        >
        <el-button v-if="addorEdit == 'edit'" type="primary" @click="editSubmit"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  getRefuelLogAll,
  delRefuelLogById,
  getStationAll,
  newRefuelLog,
  updateRefuelLogById,
  getLoginUserInfo,
} from "@http/api.js";
import * as types from "../store/type";
import axios from "axios";
import { lsRead } from "@/common/js/ls.js";
export default {
  data() {
    return {
      imageUrl: "",
      uploadUrl: "",
      pageNum: 1,
      pageSize: 10,
      count: 0,
      sum: 0,
      addorEdit: "add",
      delConfirm: false,
      addOne: false,
      refuelLog: [],
      refuelObj: {},
      formLabelWidth: "120px",
      form: {
        refuel_time: "",
        pay_money: 0,
        pay_type: "",
        oil_type: "92",
        liters: "",
        refuel_station_id: "",
        mileage: "",
        photo: "",
      },
      stations: [],
      headers: {
        Authorization: lsRead("token"),
      },
    };
  },
  computed: {},
  mounted() {
    this._getRefuelLogAll();
    this._getStationAll();
    this.uploadUrl = axios.defaults.baseURL + "/refuel/photo";
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.photo = file.response.data;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isLt2M;
    },
    getLoginUser() {
      let userId = lsRead("userId");
      getLoginUserInfo({ userId }).then((res) => {
        let { code, data, message } = res.data;
        if (code == 200) {
          this.$store.commit(types.LOGIN, data);
        }
      });
    },
    addSation() {
      this.$router.push("/station");
    },
    close() {
      this.$refs["addOneForm"].resetFields();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this._getRefuelLogAll();
    },
    _getStationAll() {
      getStationAll().then((res) => {
        let { code, data, errMsg } = res.data;
        if (code == 200) {
          this.stations = data.map((st) => {
            return {
              key: st.stationId,
              value: st.stationId,
              label: st.stationName,
            };
          });
        } else {
          this.$notify({
            title: "wrong",
            message: errMsg || "getStationAll error!",
            type: "error",
          });
        }
      });
    },
    _getRefuelLogAll() {
      getRefuelLogAll({ pageNum: this.pageNum, pageSize: this.pageSize }).then(
        (res) => {
          let { code, data, message } = res.data;
          if (code == 200) {
            this.refuelLog = data.list;
            this.count = data.total;
          } else {
            this.$notify({
              title: "wrong",
              message: message || "getRefuelLogAll error!",
              type: "error",
            });
          }
        }
      );
    },
    edit(row, index) {
      this.addorEdit = "edit";
      this.refuelObj = row;
      this.addOne = true;
      this.$nextTick(() => {
        this.form = Object.assign({}, this.refuelLog[index]);
        this.imageUrl = row.imageUrl;
      });
    },
    editSubmit() {
      this.$refs["addOneForm"].validate((valid) => {
        if (valid) {
          updateRefuelLogById(
            Object.assign({ id: this.refuelObj.refuel_id }, this.form)
          )
            .then((res) => {
              let { code, data, errMsg } = res.data;
              if (code == 200) {
                this._getRefuelLogAll();
                this.getLoginUser();
                this.addOne = false;
              } else {
                this.$notify({
                  title: "wrong",
                  message: errMsg || "newRefuelLog error!",
                  type: "error",
                });
              }
            })
            .catch((e) => {
              console.log(e);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    del(row) {
      this.refuelObj = row;
      this.delConfirm = true;
    },
    delConfirmSubmit() {
      delRefuelLogById({ id: this.refuelObj.refuel_id }).then((res) => {
        let { code, data, errMsg } = res.data;
        if (code == 200) {
          this.delConfirm = false;
          this._getRefuelLogAll();
          this.getLoginUser();
        } else {
          this.$notify({
            title: "wrong",
            message: errMsg || "delRefuelLogById error!",
            type: "error",
          });
        }
      });
    },
    add() {
      this.addorEdit = "add";
      this.addOne = true;
      this.imageUrl = "";
    },
    addSubmit() {
      this.$refs["addOneForm"].validate((valid) => {
        if (valid) {
          newRefuelLog(Object.assign({}, this.form)).then((res) => {
            let { code, data, errMsg } = res.data;
            if (code == 200) {
              this._getRefuelLogAll();
              this.getLoginUser();
              this.addOne = false;
            } else {
              this.$notify({
                title: "wrong",
                message: errMsg || "newRefuelLog error!",
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-upload .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus" scoped>
.warpper {
  width: 100%;

  .refuel-log {
    width: 100%
    margin: 0 auto;

    .title {
      margin: 0 0 20px 0;
      text-align: left;
      font-size: 22px;
      height: 30px;
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

      .license {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        padding: 4px 10px;
        margin-right: 4px;
        background-color: blue;
        border-radius: 6px;
        border: 1px solid #ddd;
        color: #fff;
      }

      .el-icon-circle-plus {
        display: inline-block;
        vertical-align: middle;
        font-size: 26px;
        color: #409EFF;
        cursor: pointer;
        opacity: 0.8;

        &:hover {
          opacity: 1;
        }
      }

      .tip {
        display: inherit;
        font-size: 14px;
        height: 30px;
        line-height: 50px;
        color: #999;
        float: right;
      }
    }
  }
}
</style>
